<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>flash</title>
	<style type="text/css">
	#box{
		width:200px;
		height:200px;
		background:orange url() 0 0 no-repeat;
		border-radius:50%;
	}
	</style>
	<script type="text/javascript">

	   	function getStyle(obj, attr) 
		{ 
			if(obj.currentStyle){ 
				return obj.currentStyle[attr]; 
			}else{ 
				return getComputedStyle(obj,false)[attr]; 
			} 
		}

	    window.onload=function(){
	    	//获得文档中的元素
	    	var box=document.getElementById('box');
	    	var stop=document.getElementById('stop');
	    	var run=document.getElementById('run')
	    	//给各元素对象加事件
	    	var time=0;
	    	run.onclick=function(){
	    		if(!time){
	    	      time = setInterval(pao,100);
	    	   }   
	    	}
	    	stop.onclick=function(){
	    	  clearInterval(time);
	    	  time=0;
	    	}
	    	var  pao=function(){
	    	  width = parseInt(getStyle(box,'width'));
	    	  height= parseInt(getStyle(box,'height'));
	    	   if(width==400){
	    	   	  n=1;  
	    	   }else if(width==200){
	    	  	 n=0;
	    	   }
	    	   if(n){
	    	   	  width-=20;
		    	   height-=20;
	    	   }else{
	    	  	  width+=20;
		    	  height+=20;
	    	   }
	    	  // width+=20;
		      // height+=20;
	    	  box.style.width=width+'px';
	    	  box.style.height=height+'px';
	    	}

	    	
	    }
	</script>
</head>
<body>
<input type="button" value="变大" id="run">
<input type="button" value="停止" id="stop">
<div id="box" class="box"></div>
	
</body>
</html>